<template>
  <a-spin :spinning="loading">
    <a-row>
      <a-col :md="8" :sm="24">
        <a-form-item
          label="客户端id"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            v-model.trim="queryParam.filter"
            placeholder="请输入客户端id"
          />
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="24">
        <a-form-item>
          <a-button type="primary" @click="$refs.clientEdit.showModal()">新增</a-button>
          <a-divider type="vertical" />
          <a-button type="primary" @click="refresh">查询</a-button>
          <a-divider type="vertical" />
          <a-button
            @click="() => (this.queryParam = {})"
            >重置</a-button
          >
        </a-form-item>
      </a-col>
    </a-row>
    <a-table
      :rowKey="(r,i)=>i"
      :columns="columns"
      :data-source="clientList"
      :pagination="pagination"
      bordered
      @change="changeTable"
      :scroll="{ x: 1000 }"
    >
      <div slot="action" slot-scope="record">
        <a-dropdown>
          <a class="ant-dropdown-link" href="javascript:;">
            操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="$refs.clientEdit.showModal(record.id)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="$refs.permissionModal.openModal(record)">管理权限</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                title="确定要删除吗？"
                @confirm="sendWorkOrder(record)"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </a-table>
    <ClientEdit ref="clientEdit" @ok="get"></ClientEdit>
    <PermissionForm ref="permissionModal" provider-name="C" />
  </a-spin>
</template>

<script>
import { checkPermission } from '@/utils/abp';
import { getList, delClient } from '@/services/identityServer/client';
import ClientEdit from './modules/ClientEdit';
import PermissionForm from "@/pages/identity/modules/PermissionForm";
const columns = [
  {
    title: '客户端id',
    dataIndex: 'clientId',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 140
  }
]
export default {
  name: 'processRoute',
  components: {
    ClientEdit,
    PermissionForm
  },
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
      loading: false,
      columns,
      clientList: [],
      queryParam: {},
      pagination: this.$store.state.setting.pagination,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    checkPermission,
    init() {
      this.get();
    },
    get() {
      this.loading = true
      let params = {
        ...this.pagination,
        ...this.queryParam,
      }
      getList(params)
        .then((res) => {
          this.clientList = res.items
          const pagination = { ...this.pagination }
          pagination.total = res.totalCount
          this.pagination = pagination
        })
        .finally(() => {
          this.loading = false
        })
    },
    refresh() {
      this.pagination.current = 1
      this.get()
    },
    changeTable(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.get()
    },
    sendWorkOrder(record) {
      delClient({id: record.id})
        .then(res => {
          this.$message.success('删除成功');
          this.get();
        })
    }
  },
}
</script>

<style scoped></style>
